<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上下轮播</title>
    <style>
        *{margin:0; padding:0; list-style-type:none;}
        #div1{width:850px;height:500px;margin: 50px auto;overflow:hidden; position:relative;}
        #div1 ul{position:absolute;left:0;top:0;}
        #div1 ul li{height:500px;}
        #div1 ol{position:absolute;right:1%;top:200px;z-index: 6;width:30px;}
        #div1 ol li{width:20px;height:20px;background-color: #fff;margin-top: 5px;float:left;line-height:20px;text-align: center;}
        #div1 ol li.ac{background: red;color:#fff;}
        #div1>a{text-decoration: none;position:absolute;margin-top: -10px;height:40px;line-height:32px;text-align: center;width:40px;font-size: 40px;vertical-align: middle;color:#fff;background: rgba(0,0,0,0.5);z-index: 6;}
        #goPrev{left:50%;top:0;transform: rotate(90deg);position:absolute;}
        #goNext{left:50%;bottom:0;transform: rotate(90deg);position:absolute;}
        img{width:850px;height:500px;}
    </style>

    <!--1、先做点击按钮切换图片
        2、再做点击上下按钮切换
        3、自动轮播
        4、鼠标移入 自动轮播停止
    -->

    <script>
        window.onload = function () {
            var div = document.querySelector('#div1'),
                ul = document.querySelector('ul'),
                imgs = ul.querySelectorAll('li'),
                ol = div.querySelector('ol'),
                goNext = document.querySelector('#goNext'),
                goPrev = document.querySelector('#goPrev'),
                btns = []  // 将所有的按钮赋值到一个空数组里

            //  获取原有图片的张数
            var len = imgs.length;
            //  获取图片的高度
            var height = imgs[0].offsetHeight;
            //  保存当前图片的下标
            var index = 0;
            //  保存上一张图片的下标
            var lastIndex = 0;
            //  记录运动状态 默认false代表静止
            var isMove = false;
            //  自动轮播定时器
            var timer = null;

            //  在ul里克隆一个下标为0 的图片在最后面
            ul.appendChild(imgs[0].cloneNode(true));

            //  计算ul的高度
            ul.style.height = (len + 1) * height + 'px'
            //  根据图片的张数创建按钮并绑定事件按钮切换
            for (let i = 0; i < len; i++) {
                var li = document.createElement('li')
                li.innerHTML = i + 1;
                if (i === 0) li.className = 'ac'
                ol.appendChild(li)
                //  将得到的按钮放进空数组里
                btns.push(li)
                li.onclick = function () {
                    if (!isMove) {
                        // 开始移动
                        isMove = true;
                        lastIndex = index;
                        index = i;
                        //  点击按钮切换图片
                        btns[lastIndex].classList.remove('ac')
                        btns[index].classList.add('ac')
                        //  让ul移动到当前index的位置
                        move(index);
                    }
                }
            }
            // 向后切换图片
            goNext.onclick = function () {
                if (!isMove) {
                    isMove = true
                    lastIndex = index;
                    index++;
                    if (index === len) {
                        //  index 的值马上回到0  （index的范围一定是0--len-1)
                        index = 0;
                        //  往后追加那张图（克隆的那张图的下标为len） 移动结束之后瞬间回到第0张
                        move(len, function () {
                            //  ul 回到第0张
                            ul.style.top = '0px'
                        })
                    }   else {
                        //  普通情况下就直接让ul移动到当前index的位置
                        move(index)
                    }
                    //  不论if还是else按钮都按照正常的index切换样式
                    btns[lastIndex].classList.remove('ac')
                    btns[index].classList.add('ac')
                }
            }
            // 向前切换样式
            goPrev.onclick = function () {
                if (!isMove) {
                    isMove = true
                    lastIndex = index;
                    index--;
                    if (index < 0) {
                        //  瞬间拉回到克隆的那张图片  再移动
                        index = len - 1
                        ul.style.top = -len * height + 'px'
                    }
                    //  按钮样式切换
                    btns[lastIndex].classList.remove('ac')
                    btns[index].classList.add('ac')
                    //  让ul 移动到当前index的位置
                    move(index);
                }
            }

            function auto () {
                timer = setInterval (() => {
                    goNext.onclick();
                }, 2000)
            }
            auto()
            div.onmouseenter = function () {
                clearInterval(timer)
            }
            div.onmouseleave = auto;

            // 专门用于轮播图的函数
            function move(num, fn) {
                clearInterval(ul.timer)
                //  起点值就是当前ul相对的offsetParent的偏移
                var start = ul.offsetTop;
                // num是当前运动的下标
                var end = -num * height;
                ul.timer = setInterval (() => {
                    var distance = end - start;
                    var speed = distance > 0 ? Math.ceil(distance / 10) : Math.floor(distance / 10)
                    start += speed
                    ul.style.top = start + 'px'
                    if (start === end) {
                        clearInterval(ul.timer)
                        //  每一次move结束都应该回到进制状态
                        isMove = false
                        fn && fn()
                    }
                }, 30)
            }
        }
    </script>

</head>
<body>
    <div id="div1">
        <ul>
            <li><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
        </ul>
        <ol>

        </ol>
        <a href="javascript:;" id="goPrev">&laquo;</a>
        <a href="javascript:;" id="goNext">&raquo;</a>
    </div>
</body>
</html>